﻿<html>

<head>
	<title>统计表</title>
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/data.js"></script>
	<style>
		/* 控制标题样式*/
		/* .highcharts-title {} */
		.box {
			margin: 20px 0px;
		}

		.select {
			font-size: 16px;
		}
	</style>
	<script language="JavaScript">

	</script>
</head>

<body>
	<div id="app">
		<div id="container" style="width: 400px; height: 400px; margin: 0 auto"></div>
		<table id="datatable" style="display: none;">
			<thead>
				<tr>
					<th></th>
					<th>{{resultobj.username}}</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>统计详情</th>
					<td>{{resultobj['销售量']}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script src="lib/vue.js"></script>
<script>
	function chartinit() {
		Highcharts.chart('container', {
			credits: {
				enabled: true
			},
			data: {
				table: 'datatable'
			},
			chart: {
				type: 'column'
			},
			title: {
				text: '个人订阅情况统计表'
			},
			yAxis: {
				allowDecimals: false,
				title: {
					text: '销售量'
				},
				tickAmount: 8,
				ceiling: 1000,
				floor: 0,
				minTickInterval: 2,
			},
			tooltip: {
				formatter: function () {
					return '<b>' + '书籍：' + vm.resultobj['报刊名'] +
						'</b><br/> 共' +
						this.point.y + '份'
				}
			},
			credits: {
				enabled: false
			}
		})
	}
	$(function () {
		chartinit();
	})


	var vm = new Vue({
		el: '#app',
		created() {
			this.username = sessionStorage.getItem('user')
		},
		mounted() {
			var _this = this
			$.ajax({
				type: 'get',
				url: `http://localhost:8080/userstatis?username=${_this.username}`,
				async: false,
				success(data) {
					_this.resultobj = data[0]
				},
				error(err) {
					console.log(err.message);
				}
			})
		},
		data: {
			resultobj: {},
			username: ''
		}
	})
</script>

</html>